<!-- --------------------------面包屑------------------------ -->

<template>
  <div class="flex justify-between">
    <div class="tb flex pr-15px flex-shrink-0">
      <div>
        <el-icon size="25px"><Expand /></el-icon>
      </div>
      <el-breadcrumb class="breadcrumb ml-10px" separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"> 首页 </el-breadcrumb-item>
        <el-breadcrumb-item v-for="(name, id) in breadcrumbList" :key="id">
          {{ name.meta.title }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
  </div>
</template>
   

<script setup>
import {
  Expand,
  CaretBottom,
  FullScreen,
  Rank,
  Bell,
} from "@element-plus/icons-vue";

import { useRoute } from "vue-router";
import { ref, watch } from "vue";
const route = useRoute();
const breadcrumbList = ref([]);
watch(
  route,
  (to) => {
    breadcrumbList.value = to.matched.filter(
      (iteMe) => iteMe.meta.title !== "首页"
    );
  },
  { immediate: true }
);
</script>

<style>
.tb {
  cursor: pointer;
  align-items: center;
}
.breadcrumb {
  line-height: 50px;
}
.img {
  border-radius: 8px;
}
</style>